<template>
  <div>
    <div class="top">
      <span
        v-for="(item, index) in list"
        :key="index"
        @click="goTo(index)"
        :class="tabIndex == index ? 'active' : ''"
        >{{ item }}</span>
    </div>
    <div>
      <div v-if="tabIndex == 0">
        <div class="all">
          <div class="all1">
            <span
              :class="allIndex == index ? 'active' : ''"
              @click="allpush(index)"
              v-for="(item, index) in all"
              :key="index"
              >{{ item }}</span
            >
          </div>
        </div>
        <!-- 全部类型 -->
        <div v-if="allIndex == 0" class="all2">
          <span
            v-show="flag"
            :class="season_version == item.id ? 'active' : ''"
            @click="btn1(item.id)"
            v-for="(item, index) in nationality.filter[0].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
        <!-- 全部风格 -->
        <div v-if="allIndex == 1" class="all2">
          <span
            v-show="flag"
            :class="style_id == item.id ? 'active' : ''"
            @click="btn2(item.id)"
            v-for="(item, index) in nationality.filter[7].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
        <!-- 全部状态 -->
        <div v-if="allIndex == 2" class="all2">
          <span
            v-show="flag"
            :class="is_finish == item.id ? 'active' : ''"
            @click="btn3(item.id)"
            v-for="(item, index) in nationality.filter[2].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div v-if="tabIndex == 1">
        <div class="all">
          <div class="all1">
            <span
              :class="thisIndex == index ? 'active' : ''"
              @click="button(index)"
              v-for="(item, index) in all"
              :key="index"
              >{{ item }}</span
            >
          </div>
        </div>
        <div v-if="thisIndex == 0" class="all2">
          <span
            v-show="circuit"
            v-for="(item, index) in bangumi.filter[0].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
        <div v-if="thisIndex == 1" class="all2">
          <span
            v-show="circuit"
            v-for="(item, index) in bangumi.filter[5].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
        <div v-if="thisIndex == 2" class="all2">
          <span
            v-show="circuit"
            v-for="(item, index) in bangumi.filter[1].value"
            :key="index"
            >{{ item.name }}</span
          >
        </div>
      </div>
    </div>
    <!-- 渲染 数据 -->
    <div class="enevBox">
      <div>
        <div v-for="item in evenList" :key="item.season_id" class="enevItemBox">
          <!-- 图片 -->
          <div class="enevItemImgS" @click="btnUrl(item.season_id)">
            <img :src="item.cover" alt="" />
            <!-- 会员 -->
            <span class="badge" v-if="item.badge"> {{ item.badge }}</span>
            <!-- 追番量  -->
            <span class="follow_view">{{ item.order.follow }}</span>
          </div>
          <p>{{ item.title }}</p>
          <p class="desc">{{ item.index_show }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import bangumi from "../../static/bangumi";
import nationality from "../../static/nationality";
import { getEven } from "../../services/index";

export default {
  data() {
    return {
      circuit: false,
      flag: false,
      tabIndex: 0,
      allIndex: -1,
      thisIndex: -1,
      enIndex: -1,
      naIndex: -1,
      list: ["番剧", "国创"],
      all: ["全部类型", "全部风格", "全部状态"],
      bangumi: bangumi.result,
      nationality: nationality.result,
      evenList: [],
      //类型筛选
      pagesize: 30,
      season_type: 1,
      season_version: -1,
      style_id: -1,
      is_finish: -1,
      page: 1,
    };
  },
  methods: {
    goTo(index) {
      this.tabIndex = index;
    },
    allpush(index) {
      this.flag = !this.flag;
      this.allIndex = index;
    },
    button(index) {
      this.circuit = !this.circuit;
      this.thisIndex = index;
    },

    //类型
    async btn1(id) {
      this.season_version = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
    //风格
    async btn2(id) {
      this.style_id = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
    //状态
    async btn3(id) {
      this.is_finish = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
    methods:{
        goTo(index){
            this.tabIndex=index;
        },
        allpush(index){
            this.flag=!this.flag
            this.allIndex=index;
        },
        button(index){
            this.circuit=!this.circuit
            this.thisIndex=index;
        },
        goLi(index){
            this.enIndex=index;
        },

    allpush(index) {
      this.flag = !this.flag;
      this.allIndex = index;
    },
    button(index) {
      this.circuit = !this.circuit;
      this.thisIndex = index;
    },
  },

    //类型
    async btn1(id) {
      this.season_version = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
    //风格
    async btn2(id) {
      this.style_id = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
    //状态
    async btn3(id) {
      this.is_finish = id;
      let params = {
        pagesize: 30,
        season_type: this.season_type,
        season_version: this.season_version,
        style_id: this.style_id,
        is_finish: this.is_finish,
        page: this.page,
      };
      let res = await getEven(params);
      if (res.code == 0) {
        this.evenList = res.result.data;
      }
    },
  },

  async onShow() {
    let params = {
      pagesize: 30,
      season_type: this.season_type,
      season_version: this.season_version,
      style_id: this.style_id,
      is_finish: this.is_finish,
      page: this.page,
    };
    let res = await getEven(params);
    if (res.code == 0) {
      this.evenList = res.result.data;
    }
    console.log(this.evenList);
  },
};
</script>

<style lang="scss" scoped>
.top {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  border-bottom: solid 1px #eee;
  color: #999;
}
.all {
  width: 100%;
  height: 40px;
  line-height: 40px;
  display: flex;
  justify-content: space-around;
  flex-direction: column;
  color: #999;
  font-size: 13px;
}
.all1 {
  display: flex;
  justify-content: space-around;
}
.all2 {
  border-bottom: solid 1px #eee;
  display: flex;
  flex-wrap: wrap;
  span {
    text-align: center;
    display: inline-block;
    width: 25%;
    height: 20px;
    font-size: 13px;
    color: #999;
  }
  .active {
    color: #eb779a;
  }
}
.active {
  color: #eb779a;
}

//渲染数据列表
.enevBox {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 20rpx;
  > div {
    width: 90%;
    display: flex;
    flex-wrap: wrap;
    > .enevItemBox {
      width: 30%;
      display: flex;
      flex-direction: column;
      margin-right: 23rpx;
      > .enevItemImgS {
        width: 200rpx;
        height: 300rpx;
        position: relative;
        img {
          width: 100%;
          height: 100%;
        }
        > span {
          font-size: 22rpx;
          color: #fff;
        }
        // 独家
        .badge {
          position: absolute;
          top: 6rpx;
          right: 8rpx;
          padding: 0 8rpx;
          border-radius: 8rpx;
          background: rgb(240, 96, 120);
        }
        //追番
        .follow_view {
          position: absolute;
          bottom: 6rpx;
          left: 5rpx;
          border-radius: 8rpx;
          background: rgba($color: #000000, $alpha: 0.4);
        }
      }
      //标题
      > p {
        font-size: 26rpx;
      }
      //更新
      .desc {
        font-size: 26rpx;
        color: #999;
      }
    }
  }
}
</style>
